<template>
  <div class="detail">
    <div class="list1">
      <div class="div1">
        <router-link :to='{name:"myinfo"}'>
          <a href="#">
            <p>
              <i class="iconfont icon-yonghu"></i>
              会员中心
            </p>
            <p class="j">&gt;</p>
          </a>
        </router-link>
      </div>

      <div class="div1">
        <router-link :to='{name:"myinfo"}'>
          <a href="#">
            <p>
              <i class="iconfont icon-web-icon-"></i>
              我的优惠
            </p>
            <p class="j">&gt;</p>
          </a>
        </router-link>
      </div>
    </div>

    <div class="list2">
      <div class="div1">
        <router-link  :to='{name:"myinfo"}'>
          <a href="#">
            <p>
              <i class="iconfont icon-fuwu"></i>
              服务中心
            </p>
            <p class="j">&gt;</p>
          </a>
        </router-link>
      </div>

      <div class="div1">
        <router-link :to='{name:"myinfo"}'>
          <a href="#">
            <p>
              <i class="iconfont icon-xiaomi"></i>
              小米之家
            </p>
            <p class="j">&gt;</p>
          </a>
        </router-link>
      </div>
    </div>

    <div class="div1">
      <router-link :to='{name:"myinfo"}'>
        <a href="#">
          <p>
            <i class="iconfont icon-daishouhuo"></i>
            F码通道
          </p>
          <p class="j">&gt;</p>
        </a>
      </router-link>
    </div>

    <div class="div1 list3">
      <router-link :to='{name:"myinfo"}'>
        <a href="#">
          <p>
            <i class="iconfont icon-shezhi"></i>
            设置
          </p>
          <p class="j">&gt;</p>
        </a>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    myInfo() {
      this.$router.push({ name: "myinfo" });
    }
  }
};
</script>

<style lang='scss' scoped>
$appwidth: 375;

@function pxtovw($p) {
  @return (100 / $appwidth * $p) * 1vw;
}
.detail {
  width: 100%;
  height: pxtovw(330);
  position: absolute;
  top: pxtovw(225);

  div {
    background: white;
    width: 100%;

    a {
      width: 100%;
      display: inline-block;
      text-decoration: none;
      color: #666;
      font-size: pxtovw(16);
      i {
        font-size: pxtovw(18);
        margin-left: pxtovw(10);
      }
      p {
        display: inline-block;
      }
    }
  }
  .div1 {
    width: 100%;
    height: pxtovw(50);
    line-height: pxtovw(50);
    .j {
      position: absolute;
      right: pxtovw(20);
    }
  }

  .list1 {
    margin-bottom: pxtovw(5);
  }
  .list2 {
    margin-bottom: pxtovw(5);
  }
  .list3 {
    margin-bottom: pxtovw(5);
    margin-top: pxtovw(5);
  }
}
</style>
